<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
<route lang="json5" type="home">
{
  style: {
    navigationBarTitleText: '免单福利',
  },
}
</route>
<template>
  <view class="page">
    <view class="head">
      <view class="hbox">
        <view class="np">
          <view class="np1">7天内，同一商品限购1单</view>
          <view class="np2">
            <view class="left">今天我能拍</view>
            <view class="right">
              <view class="gg">
                <text>抖音</text>
                <text>4单</text>
              </view>
              <view class="gg">
                <text>快手</text>
                <text>4单</text>
              </view>
              <view class="gg">
                <text>微小店</text>
                <text>5单</text>
              </view>
            </view>
          </view>
          <view class="np3">
            同一手机号、终端设备、支付宝账号、身份证视为同一用户。请勿多
            账号下单，系统会检测您的行为，一经发现封号处理。
          </view>
        </view>
        <view class="zfb">
          <view class="zfb1">
            <img class="zfbimg" src="@/static/images/zfb.png" alt="" />
            <text>支付宝安全检验</text>
          </view>
          <view class="zfb2">
            <wd-icon name="check-circle-filled" color="#0071e9" size="20px"></wd-icon>
            <text class="bzz">保障中</text>
            <wd-icon name="chevron-right" size="22px"></wd-icon>
          </view>
        </view>
      </view>
    </view>
    <view class="list-box">
      <view class="tabs">
        <text
          class="tab-item"
          @click="changeTab(o)"
          :class="o == tab && 'active'"
          v-for="o in tabs"
          :key="o"
        >
          {{ o }}
        </text>
      </view>
      <view class="list">
        <view class="ckjc">
          <text>查看教程</text>
        </view>
        <view class="lists">
          <itemvue v-for="(o, i) in list" :key="i" :info="o"></itemvue>
        </view>
      </view>
    </view>
    <wd-backtop
      :scrollTop="scrollTop"
      :top="500"
      customStyle="background: #007aff;color:white;"
    ></wd-backtop>
  </view>
</template>

<script lang="ts" setup>
import { getProduct } from '@/service/product/index'
import itemvue from './item.vue'
const tabs = ref(['代付', '快手先付后返', '微小店先付后返'])
const tab = ref('代付')
function changeTab(item) {
  tab.value = item
  if (item === '代付') {
    getList()
  } else {
    getList()
  }
}

const list = ref([])

const scrollTop = ref<number>(0)
onPageScroll((e) => {
  scrollTop.value = e.scrollTop
})
onMounted(() => {
  getList()
})
function getList() {
  getProduct({
    currentPage: 1,
    pageSize: 10,
    filter: {
      // shopId: 0,
      // title: '',
      // checkStatus: 0,
      // shopType: 0,
      // saleStatus: 0,
    },
  }).then((res) => {
    list.value = res.data.list
  })
}
</script>

<style lang="scss" scoped>
.page {
  height: calc(100% - 100rpx);
  overflow-y: auto;
  box-sizing: border-box;
  background: #f8f8f8;
  .head {
    width: 100%;
    height: 60vh;
    background-image: url(@/static/images/20240403md_top_bg.jpg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: relative;
    .hbox {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 45%;
      padding: 20rpx 40rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      .np {
        flex: 1;
        box-sizing: border-box;
        width: 100%;
        margin-bottom: 20rpx;
        background: #fffcf7;
        border-radius: 10rpx;
        display: flex;
        flex-direction: column;

        .np1 {
          text-align: center;
          font-size: 26rpx;
          color: black;
          padding: 10rpx;
        }
        .np2 {
          flex: 1;
          display: flex;
          justify-content: space-between;
          padding: 20rpx;
          background-color: #fff4e2;
          margin: 0 20rpx;
          border-radius: 10rpx;
          .left {
            flex: 1;
            color: #333;
            font-size: 32rpx;
            display: flex;
            align-items: center;
            font-weight: bold;
          }
          .right {
            width: 50%;
            display: flex;
            justify-content: space-evenly;
            flex-direction: column;
            .gg {
              display: flex;
              justify-content: space-between;
              align-items: center;
              color: #ff3d58;
              font-size: 36rpx;
              font-weight: bold;
            }
          }
        }
        .np3 {
          font-size: 20rpx;
          color: #666;
          padding: 10rpx;
          padding-bottom: 30rpx;
        }
      }
      .zfb {
        padding: 10rpx 20rpx;
        width: 100%;
        box-sizing: border-box;
        background: #eaf2ff;
        border-radius: 10rpx;
        color: #0071e9;
        font-size: 32rpx;
        font-weight: bold;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .zfbimg {
          width: 24px;
          height: 24px;
          padding-right: 10rpx;
        }
        .bzz {
          font-weight: normal;
          font-size: 28rpx;
          padding-left: 20rpx;
          padding-right: 10rpx;
        }
        .zfb1 {
          flex: 1;
        }
        .zfb1,
        .zfb2 {
          display: flex;
          align-items: center;
        }
      }
    }
  }
}

.list-box {
  .tabs {
    display: flex;
    justify-content: space-around;
    padding: 10rpx 20rpx;
    .tab-item {
      color: #666;
      background: white;
      border-radius: 10rpx;
      font-weight: normal;
      padding: 10rpx 40rpx;
      letter-spacing: 1px;
      font-size: 28rpx;
      &.active {
        color: white;
        background: #ff3d58;
      }
    }
  }

  .list {
    padding: 0 40rpx 20rpx;
    .ckjc {
      text-align: right;
      color: #0000ee;
      font-size: 28rpx;
      padding: 10rpx;
    }
  }
}
</style>
